import React, { Component } from 'react'
import { CloseOutlined,UserOutlined,WeiboOutlined ,QqOutlined,MailOutlined} from '@ant-design/icons';
import { Form, Input, Button, Checkbox,message } from 'antd';
import { Link ,withRouter} from "react-router-dom"
import styles from './index.module.css'
// import axios from 'axios'
import request from '../../utils/request'

// import * as TodoActionCreators from "@store/Action";
// import request from "@utils/request";


const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

class PhoneLogin extends Component {
    

    onFinish = (values) => {
        console.log(values,'values');
        
        request.post("http://lmx.free.idcfengye.com/user/nice/user/loginByUsername", { username:values.username,password:values.password}).then(res => {
          console.log(res)
          if(!res.data) {
            message.error('用户名或密码错误');
            return
        }
        localStorage.setItem('token', res.data);          
        message.success('登录成功');
        setTimeout(()=>{
            this.props.history.push('/');
        },1000)
        })
      
    }
    render() {
        return (
            <div style={{ padding: '5%', width: '100%' }} className={styles.phone}>
                <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '16px' }}>
                    <CloseOutlined style={{ color: '#999' }} onClick={() => this.props.history.push('/register')}/>
                    <span>帮助</span>
                </header>
                <h2 style={{ fontSize: '24px', fontWeight: 'bold', marginTop: '15%', marginLeft: '10%' }}>用户名登录</h2>
                <Form
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    style={{ fontWeight: 'bold', margin: '2% 10% ' }}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的用户名!',
                            },
                        ]}
                        style={{ marginBottom: '3%' }}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                        style={{ marginBottom: '3%' }}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" style={{ width: '100%', marginBottom: '3%' }}>
                        <Checkbox>记住密码</Checkbox>
                        <Link><span style={{ float: 'right',color:'#333' }}>忘记密码？</span></Link>
                    </Form.Item>

                    <Form.Item >
                        <Button htmlType="submit" style={{ backgroundColor: '#fee004', fontSize: '14px', fontWeight: 'bold', width: '100%', outline: 'none', border: '0' }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>

                <p style={{ width: '100%',textAlign:'center' ,marginTop:'30%',fontSize:'13px'}}>其他社交帐号快速登录</p>
                <div style={{ width: '100%',padding:'0 17%',display:'flex',justifyContent:'space-around',fontSize:'20px' }}>
                    <Link to='/PhoneLogin'><UserOutlined ined style={{color:'#5bb338'}}/></Link>
                    <Link><WeiboOutlined style={{color:'#f45456'}}/></Link>
                    <Link><QqOutlined style={{color:'#2fb2e6'}}/></Link>
                    <Link to='/EmailLogin'><MailOutlined style={{color:'#fb7520'}}/></Link>
                </div>
                <p style={{ width: '100%',textAlign:'center',marginTop:'3%',fontSize:'13px' }}>登录注册表示同意用户协议、隐私政策</p>
            </div>
        )
    }
}

export default withRouter(PhoneLogin)

